﻿Ext.define('Sofia.view.Viewport',
{
    extend: 'Ext.container.Viewport',
    requires:
    [
        'Sofia.view.Sidebar',
        'Sofia.view.Graphics',
        'Sofia.view.tab.File',
        'Sofia.view.tab.Run',
        'Sofia.view.tab.Visualize',
        'Sofia.view.tab.Plot'
    ],
    layout: 'fit',

    initComponent: function () {
        var DEFAULT_BUTTON_WIDTH = 60;
        var DEFAULT_BUTTON_HEIGHT = 20;
        var DEFAULT_BUTTON_MARGIN = '4 5 0 5'; //top right bottom left

        this.items =
        {
            xtype: 'panel',
            layout: 'border',
            items:
            [
                {
                    //Top panel with buttons
                    xtype: 'panel',
                    region: 'north',
                    margins: '1 1 1 1',
                    id: 'HeaderPanel',
                    layout:
                    {
                        type: 'hbox',
                        align: 'align'
                    },
                    preventHeader: true,
                    items:
                    [
                        {
                            xtype: 'button',
                            id: 'FileButton',
                            width: DEFAULT_BUTTON_WIDTH,
                            height: DEFAULT_BUTTON_HEIGHT,
                            margins: DEFAULT_BUTTON_MARGIN,
                            text: 'File'
                        },
                        {
                            xtype: 'button',
                            id: 'RunButton',
                            width: DEFAULT_BUTTON_WIDTH,
                            height: DEFAULT_BUTTON_HEIGHT,
                            margins: DEFAULT_BUTTON_MARGIN,
                            text: 'Run'
                        },
                        {
                            xtype: 'button',
                            id: 'VisualizeButton',
                            width: DEFAULT_BUTTON_WIDTH,
                            height: DEFAULT_BUTTON_HEIGHT,
                            margins: DEFAULT_BUTTON_MARGIN,
                            text: 'Visualize'
                        },
                        {
                            xtype: 'button',
                            id: 'PlotButton',
                            width: DEFAULT_BUTTON_WIDTH,
                            height: DEFAULT_BUTTON_HEIGHT,
                            margins: DEFAULT_BUTTON_MARGIN,
                            text: 'Plot'
                        }
                    ],
                    height: 30
                },

                {
                    //Sidebar panel on the left - tabPanel with special functionality
                    xtype: 'sidebar',
                    region: 'center',
                    preventHeader: true,
                    margins: '0 1 1 1', //top right bottom left
                    tabBar:
                    {
                        hidden: true
                    },
                    items: //Tabs
                    [
                        {
                            xtype: 'fileTab' //see FileTab.js
                        },
                        {
                            xtype: 'runTab' //see RunTab.js
                        },
                        {
                            xtype: 'visualizeTab' //see VisualizeTab.js
                        },
                        {
                            xtype: 'plotTab' //see PlotTab.js
                        }
                    ],
                    height: 200
                },

                {
                    //Panel for WebGL graphics
                    xtype: 'graphics',
                    region: 'east'
            },
                {
                    //Panel for docked plots
                    xtype: 'panel',
                    region: 'south',
                    preventHeader: true
                }
            ]
        };
        this.callParent();
    }
});